<template>
	<view class="danci-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">背单词小游戏</view>
			<view class="nav-right"></view>
		</view>

		<!-- 游戏状态显示 -->
		<view class="game-stats">
			<view class="stat-item">
				<text class="stat-label">进度</text>
				<text class="stat-value">{{ currentIndex + 1 }}/{{ words.length }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">正确</text>
				<text class="stat-value correct">{{ correctCount }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">错误</text>
				<text class="stat-value error">{{ wrongCount }}</text>
			</view>
		</view>

		<!-- 进度条 -->
		<view class="progress-container">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
			</view>
		</view>

		<!-- 游戏内容区域 -->
		<view class="game-content" v-if="!gameFinished">
			<!-- 单词卡片 -->
			<view class="word-card" :class="{ 'flip': showAnswer }">
				<view class="card-front">
					<view class="word-display">
						<text class="word-text">{{ currentWord.word }}</text>
						<text class="word-phonetic">[{{ currentWord.phonetic }}]</text>
					</view>
					<view class="card-hint">
						<text class="hint-text">点击查看释义</text>
					</view>
				</view>
				<view class="card-back">
					<view class="meaning-display">
						<text class="meaning-text">{{ currentWord.meaning }}</text>
						<text class="example-text" v-if="currentWord.example">{{ currentWord.example }}</text>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="action-btn show-answer" @click="toggleAnswer" v-if="!showAnswer">
					显示答案
				</button>
				<view class="answer-buttons" v-else>
					<button class="answer-btn wrong" @click="markWrong">不认识</button>
					<button class="answer-btn correct" @click="markCorrect">认识</button>
				</view>
			</view>
		</view>

		<!-- 游戏结束页面 -->
		<view class="game-finished" v-if="gameFinished">
			<view class="result-card">
				<view class="result-icon">🎉</view>
				<text class="result-title">游戏完成！</text>
				<view class="result-stats">
					<view class="result-stat">
						<text class="result-label">总题数</text>
						<text class="result-value">{{ words.length }}</text>
					</view>
					<view class="result-stat">
						<text class="result-label">正确率</text>
						<text class="result-value">{{ accuracy }}%</text>
					</view>
				</view>
				<view class="result-actions">
					<button class="result-btn restart" @click="restartGame">再来一次</button>
					<button class="result-btn back" @click="goBack">返回</button>
				</view>
			</view>
		</view>

		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<text class="decoration-text">📚</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 单词数据
const words = ref([
	// 基础词汇
	{ word: 'apple', phonetic: '/ˈæpl/', meaning: '苹果', example: 'I eat an apple every day.' },
	{ word: 'beautiful', phonetic: '/ˈbjuːtɪfl/', meaning: '美丽的', example: 'She is a beautiful girl.' },
	{ word: 'computer', phonetic: '/kəmˈpjuːtər/', meaning: '计算机', example: 'I use my computer for work.' },
	{ word: 'delicious', phonetic: '/dɪˈlɪʃəs/', meaning: '美味的', example: 'This cake is delicious.' },
	{ word: 'education', phonetic: '/ˌedʒuˈkeɪʃn/', meaning: '教育', example: 'Education is very important.' },
	{ word: 'fantastic', phonetic: '/fænˈtæstɪk/', meaning: '极好的', example: 'The movie was fantastic.' },
	{ word: 'garden', phonetic: '/ˈɡɑːrdn/', meaning: '花园', example: 'We have a beautiful garden.' },
	{ word: 'happiness', phonetic: '/ˈhæpɪnəs/', meaning: '幸福', example: 'Happiness is a choice.' },
	{ word: 'important', phonetic: '/ɪmˈpɔːrtnt/', meaning: '重要的', example: 'This is an important meeting.' },
	{ word: 'journey', phonetic: '/ˈdʒɜːrni/', meaning: '旅程', example: 'Life is a journey.' },
	
	// 日常生活词汇
	{ word: 'breakfast', phonetic: '/ˈbrekfəst/', meaning: '早餐', example: 'I have breakfast at 7 AM.' },
	{ word: 'restaurant', phonetic: '/ˈrestərɑːnt/', meaning: '餐厅', example: 'We went to a nice restaurant.' },
	{ word: 'shopping', phonetic: '/ˈʃɑːpɪŋ/', meaning: '购物', example: 'I love shopping on weekends.' },
	{ word: 'exercise', phonetic: '/ˈeksərsaɪz/', meaning: '锻炼', example: 'Exercise is good for health.' },
	{ word: 'weather', phonetic: '/ˈweðər/', meaning: '天气', example: 'The weather is nice today.' },
	{ word: 'vacation', phonetic: '/vəˈkeɪʃn/', meaning: '假期', example: 'I need a vacation.' },
	{ word: 'hospital', phonetic: '/ˈhɑːspɪtl/', meaning: '医院', example: 'He went to the hospital.' },
	{ word: 'library', phonetic: '/ˈlaɪbreri/', meaning: '图书馆', example: 'I study in the library.' },
	{ word: 'museum', phonetic: '/mjuˈziːəm/', meaning: '博物馆', example: 'The museum is very interesting.' },
	{ word: 'theater', phonetic: '/ˈθiːətər/', meaning: '剧院', example: 'We watched a play at the theater.' },
	
	// 情感和性格词汇
	{ word: 'excited', phonetic: '/ɪkˈsaɪtɪd/', meaning: '兴奋的', example: 'I am excited about the trip.' },
	{ word: 'nervous', phonetic: '/ˈnɜːrvəs/', meaning: '紧张的', example: 'She feels nervous before exams.' },
	{ word: 'confident', phonetic: '/ˈkɑːnfɪdənt/', meaning: '自信的', example: 'He is confident in his abilities.' },
	{ word: 'generous', phonetic: '/ˈdʒenərəs/', meaning: '慷慨的', example: 'She is very generous with her time.' },
	{ word: 'patient', phonetic: '/ˈpeɪʃnt/', meaning: '耐心的', example: 'Teachers need to be patient.' },
	{ word: 'creative', phonetic: '/kriˈeɪtɪv/', meaning: '有创造力的', example: 'She is a creative artist.' },
	{ word: 'honest', phonetic: '/ˈɑːnɪst/', meaning: '诚实的', example: 'Always be honest with others.' },
	{ word: 'brave', phonetic: '/breɪv/', meaning: '勇敢的', example: 'The firefighter is very brave.' },
	{ word: 'curious', phonetic: '/ˈkjʊriəs/', meaning: '好奇的', example: 'Children are naturally curious.' },
	{ word: 'optimistic', phonetic: '/ˌɑːptɪˈmɪstɪk/', meaning: '乐观的', example: 'Stay optimistic about the future.' },
	
	// 学习和工作词汇
	{ word: 'knowledge', phonetic: '/ˈnɑːlɪdʒ/', meaning: '知识', example: 'Knowledge is power.' },
	{ word: 'experience', phonetic: '/ɪkˈspɪriəns/', meaning: '经验', example: 'Experience teaches us many things.' },
	{ word: 'opportunity', phonetic: '/ˌɑːpərˈtuːnəti/', meaning: '机会', example: 'This is a great opportunity.' },
	{ word: 'challenge', phonetic: '/ˈtʃælɪndʒ/', meaning: '挑战', example: 'Life is full of challenges.' },
	{ word: 'success', phonetic: '/səkˈses/', meaning: '成功', example: 'Success requires hard work.' },
	{ word: 'failure', phonetic: '/ˈfeɪljər/', meaning: '失败', example: 'Failure is the mother of success.' },
	{ word: 'achievement', phonetic: '/əˈtʃiːvmənt/', meaning: '成就', example: 'She is proud of her achievement.' },
	{ word: 'goal', phonetic: '/ɡoʊl/', meaning: '目标', example: 'Set clear goals for yourself.' },
	{ word: 'dream', phonetic: '/driːm/', meaning: '梦想', example: 'Follow your dreams.' },
	{ word: 'ambition', phonetic: '/æmˈbɪʃn/', meaning: '雄心', example: 'He has great ambition.' },
	
	// 科技和现代生活词汇
	{ word: 'internet', phonetic: '/ˈɪntərnet/', meaning: '互联网', example: 'The internet changed our lives.' },
	{ word: 'smartphone', phonetic: '/ˈsmɑːrtfoʊn/', meaning: '智能手机', example: 'Everyone has a smartphone now.' },
	{ word: 'software', phonetic: '/ˈsɔːftwer/', meaning: '软件', example: 'This software is very useful.' },
	{ word: 'database', phonetic: '/ˈdeɪtəbeɪs/', meaning: '数据库', example: 'The database stores all information.' },
	{ word: 'algorithm', phonetic: '/ˈælɡərɪðəm/', meaning: '算法', example: 'This algorithm is very efficient.' },
	{ word: 'innovation', phonetic: '/ˌɪnəˈveɪʃn/', meaning: '创新', example: 'Innovation drives progress.' },
	{ word: 'technology', phonetic: '/tekˈnɑːlədʒi/', meaning: '技术', example: 'Technology is advancing rapidly.' },
	{ word: 'digital', phonetic: '/ˈdɪdʒɪtl/', meaning: '数字的', example: 'We live in a digital age.' },
	{ word: 'virtual', phonetic: '/ˈvɜːrtʃuəl/', meaning: '虚拟的', example: 'Virtual reality is amazing.' },
	{ word: 'artificial', phonetic: '/ˌɑːrtɪˈfɪʃl/', meaning: '人工的', example: 'Artificial intelligence is developing.' },
	
	// 自然和环境词汇
	{ word: 'environment', phonetic: '/ɪnˈvaɪrənmənt/', meaning: '环境', example: 'Protect the environment.' },
	{ word: 'pollution', phonetic: '/pəˈluːʃn/', meaning: '污染', example: 'Air pollution is a serious problem.' },
	{ word: 'recycling', phonetic: '/riˈsaɪklɪŋ/', meaning: '回收利用', example: 'Recycling helps the environment.' },
	{ word: 'sustainable', phonetic: '/səˈsteɪnəbl/', meaning: '可持续的', example: 'We need sustainable development.' },
	{ word: 'biodiversity', phonetic: '/ˌbaɪoʊdaɪˈvɜːrsəti/', meaning: '生物多样性', example: 'Biodiversity is important for ecosystems.' },
	{ word: 'ecosystem', phonetic: '/ˈiːkoʊsɪstəm/', meaning: '生态系统', example: 'Forests are complex ecosystems.' },
	{ word: 'climate', phonetic: '/ˈklaɪmət/', meaning: '气候', example: 'Climate change affects everyone.' },
	{ word: 'renewable', phonetic: '/rɪˈnuːəbl/', meaning: '可再生的', example: 'Solar energy is renewable.' },
	{ word: 'conservation', phonetic: '/ˌkɑːnsərˈveɪʃn/', meaning: '保护', example: 'Wildlife conservation is crucial.' },
	{ word: 'greenhouse', phonetic: '/ˈɡriːnhaʊs/', meaning: '温室', example: 'Greenhouse gases cause global warming.' },
	
	// 艺术和文化词汇
	{ word: 'culture', phonetic: '/ˈkʌltʃər/', meaning: '文化', example: 'Every country has its own culture.' },
	{ word: 'tradition', phonetic: '/trəˈdɪʃn/', meaning: '传统', example: 'We respect our traditions.' },
	{ word: 'heritage', phonetic: '/ˈherɪtɪdʒ/', meaning: '遗产', example: 'This building is cultural heritage.' },
	{ word: 'artistic', phonetic: '/ɑːrˈtɪstɪk/', meaning: '艺术的', example: 'She has artistic talent.' },
	{ word: 'creative', phonetic: '/kriˈeɪtɪv/', meaning: '有创造力的', example: 'Art requires creative thinking.' },
	{ word: 'inspiration', phonetic: '/ˌɪnspəˈreɪʃn/', meaning: '灵感', example: 'Nature is my inspiration.' },
	{ word: 'masterpiece', phonetic: '/ˈmæstərpiːs/', meaning: '杰作', example: 'This painting is a masterpiece.' },
	{ word: 'exhibition', phonetic: '/ˌeksɪˈbɪʃn/', meaning: '展览', example: 'The art exhibition was amazing.' },
	{ word: 'performance', phonetic: '/pərˈfɔːrməns/', meaning: '表演', example: 'The performance was outstanding.' },
	{ word: 'symphony', phonetic: '/ˈsɪmfəni/', meaning: '交响乐', example: 'I love classical symphony.' },
	
	// 健康和医疗词汇
	{ word: 'healthy', phonetic: '/ˈhelθi/', meaning: '健康的', example: 'Eating vegetables keeps you healthy.' },
	{ word: 'medicine', phonetic: '/ˈmedsən/', meaning: '药物', example: 'Take your medicine on time.' },
	{ word: 'surgery', phonetic: '/ˈsɜːrdʒəri/', meaning: '手术', example: 'The surgery was successful.' },
	{ word: 'therapy', phonetic: '/ˈθerəpi/', meaning: '治疗', example: 'Physical therapy helps recovery.' },
	{ word: 'vaccine', phonetic: '/vækˈsiːn/', meaning: '疫苗', example: 'Vaccines prevent diseases.' },
	{ word: 'diagnosis', phonetic: '/ˌdaɪəɡˈnoʊsɪs/', meaning: '诊断', example: 'The diagnosis was accurate.' },
	{ word: 'treatment', phonetic: '/ˈtriːtmənt/', meaning: '治疗', example: 'Early treatment is important.' },
	{ word: 'recovery', phonetic: '/rɪˈkʌvəri/', meaning: '康复', example: 'She made a full recovery.' },
	{ word: 'prevention', phonetic: '/prɪˈvenʃn/', meaning: '预防', example: 'Prevention is better than cure.' },
	{ word: 'wellness', phonetic: '/ˈwelnəs/', meaning: '健康', example: 'Wellness is a lifestyle choice.' },
	
	// 经济和商业词汇
	{ word: 'business', phonetic: '/ˈbɪznəs/', meaning: '商业', example: 'He started his own business.' },
	{ word: 'economy', phonetic: '/ɪˈkɑːnəmi/', meaning: '经济', example: 'The economy is growing.' },
	{ word: 'investment', phonetic: '/ɪnˈvestmənt/', meaning: '投资', example: 'Real estate is a good investment.' },
	{ word: 'profit', phonetic: '/ˈprɑːfɪt/', meaning: '利润', example: 'The company made a profit.' },
	{ word: 'market', phonetic: '/ˈmɑːrkɪt/', meaning: '市场', example: 'The market is competitive.' },
	{ word: 'customer', phonetic: '/ˈkʌstəmər/', meaning: '顾客', example: 'Customer satisfaction is important.' },
	{ word: 'product', phonetic: '/ˈprɑːdʌkt/', meaning: '产品', example: 'This product is very popular.' },
	{ word: 'service', phonetic: '/ˈsɜːrvɪs/', meaning: '服务', example: 'Good service attracts customers.' },
	{ word: 'competition', phonetic: '/ˌkɑːmpəˈtɪʃn/', meaning: '竞争', example: 'Competition drives innovation.' },
	{ word: 'strategy', phonetic: '/ˈstrætədʒi/', meaning: '策略', example: 'We need a new strategy.' },
	
	// 运动和娱乐词汇
	{ word: 'athlete', phonetic: '/ˈæθliːt/', meaning: '运动员', example: 'He is a professional athlete.' },
	{ word: 'competition', phonetic: '/ˌkɑːmpəˈtɪʃn/', meaning: '比赛', example: 'The competition was intense.' },
	{ word: 'championship', phonetic: '/ˈtʃæmpiənʃɪp/', meaning: '锦标赛', example: 'She won the championship.' },
	{ word: 'training', phonetic: '/ˈtreɪnɪŋ/', meaning: '训练', example: 'Daily training is essential.' },
	{ word: 'fitness', phonetic: '/ˈfɪtnəs/', meaning: '健身', example: 'Fitness is important for health.' },
	{ word: 'entertainment', phonetic: '/ˌentərˈteɪnmənt/', meaning: '娱乐', example: 'Movies are popular entertainment.' },
	{ word: 'adventure', phonetic: '/ədˈventʃər/', meaning: '冒险', example: 'Life is an adventure.' },
	{ word: 'hobby', phonetic: '/ˈhɑːbi/', meaning: '爱好', example: 'Reading is my favorite hobby.' },
	{ word: 'leisure', phonetic: '/ˈliːʒər/', meaning: '休闲', example: 'I enjoy leisure time.' },
	{ word: 'recreation', phonetic: '/ˌrekriˈeɪʃn/', meaning: '娱乐活动', example: 'Swimming is good recreation.' },
	
	// 高级词汇
	{ word: 'sophisticated', phonetic: '/səˈfɪstɪkeɪtɪd/', meaning: '复杂的', example: 'This is a sophisticated system.' },
	{ word: 'comprehensive', phonetic: '/ˌkɑːmprɪˈhensɪv/', meaning: '全面的', example: 'We need a comprehensive plan.' },
	{ word: 'fundamental', phonetic: '/ˌfʌndəˈmentl/', meaning: '基本的', example: 'This is a fundamental principle.' },
	{ word: 'significant', phonetic: '/sɪɡˈnɪfɪkənt/', meaning: '重要的', example: 'This is a significant discovery.' },
	{ word: 'phenomenon', phonetic: '/fəˈnɑːmɪnən/', meaning: '现象', example: 'This is an interesting phenomenon.' },
	{ word: 'philosophy', phonetic: '/fəˈlɑːsəfi/', meaning: '哲学', example: 'Philosophy explores life\'s meaning.' },
	{ word: 'psychology', phonetic: '/saɪˈkɑːlədʒi/', meaning: '心理学', example: 'Psychology studies human behavior.' },
	{ word: 'sociology', phonetic: '/ˌsoʊsiˈɑːlədʒi/', meaning: '社会学', example: 'Sociology examines social patterns.' },
	{ word: 'anthropology', phonetic: '/ˌænθrəˈpɑːlədʒi/', meaning: '人类学', example: 'Anthropology studies human cultures.' },
	{ word: 'archaeology', phonetic: '/ˌɑːrkiˈɑːlədʒi/', meaning: '考古学', example: 'Archaeology uncovers ancient history.' }
])

// 游戏状态
const currentIndex = ref(0)
const correctCount = ref(0)
const wrongCount = ref(0)
const showAnswer = ref(false)
const gameFinished = ref(false)

// 计算属性
const currentWord = computed(() => words.value[currentIndex.value])
const progressPercent = computed(() => ((currentIndex.value + 1) / words.value.length) * 100)
const accuracy = computed(() => {
	const total = correctCount.value + wrongCount.value
	return total > 0 ? Math.round((correctCount.value / total) * 100) : 0
})

// 方法
const toggleAnswer = () => {
	showAnswer.value = true
}

const markCorrect = () => {
	correctCount.value++
	nextWord()
}

const markWrong = () => {
	wrongCount.value++
	nextWord()
}

const nextWord = () => {
	if (currentIndex.value < words.value.length - 1) {
		currentIndex.value++
		showAnswer.value = false
	} else {
		gameFinished.value = true
	}
}

const restartGame = () => {
	currentIndex.value = 0
	correctCount.value = 0
	wrongCount.value = 0
	showAnswer.value = false
	gameFinished.value = false
}

const goBack = () => {
	// 检查是否有上一页可以返回
	const pages = getCurrentPages()
	if (pages.length > 1) {
		uni.navigateBack()
	} else {
		// 如果没有上一页，跳转到更多页面
		uni.switchTab({
			url: '/pages/gengduo/gengduo'
		})
	}
}

// 页面加载时打乱单词顺序
onMounted(() => {
	words.value = words.value.sort(() => Math.random() - 0.5)
})
</script>

<style lang="scss" scoped>
.danci-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
	overflow: hidden;
}

.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
    margin-top: 100rpx;
	padding: 20rpx 30rpx;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10rpx);
	
	.nav-left {
		.back-icon {
			font-size: 40rpx;
			color: white;
			font-weight: bold;
		}
	}
	
	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.nav-right {
		width: 40rpx;
	}
}

.game-stats {
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	
	.stat-item {
		text-align: center;
		
		.stat-label {
			display: block;
			color: rgba(255, 255, 255, 0.8);
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
		
		.stat-value {
			display: block;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			
			&.correct {
				color: #4CAF50;
			}
			
			&.error {
				color: #F44336;
			}
		}
	}
}

.progress-container {
	padding: 0 30rpx 30rpx;
	
	.progress-bar {
		height: 8rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 4rpx;
		overflow: hidden;
		
		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #4CAF50, #8BC34A);
			border-radius: 4rpx;
			transition: width 0.3s ease;
		}
	}
}

.game-content {
	padding: 0 30rpx;
}

.word-card {
	background: white;
	border-radius: 20rpx;
	margin: 30rpx 0;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
	perspective: 1000rpx;
	height: 400rpx;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s;
	
	&.flip {
		transform: rotateY(180deg);
	}
	
	.card-front, .card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
	}
	
	.card-back {
		transform: rotateY(180deg);
	}
	
	.word-display {
		text-align: center;
		margin-bottom: 30rpx;
		
		.word-text {
			display: block;
			font-size: 60rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.word-phonetic {
			display: block;
			font-size: 32rpx;
			color: #666;
			font-style: italic;
		}
	}
	
	.card-hint {
		.hint-text {
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.meaning-display {
		text-align: center;
		
		.meaning-text {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.example-text {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
			font-style: italic;
		}
	}
}

.action-buttons {
	text-align: center;
	margin: 40rpx 0;
	
	.action-btn {
		background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 60rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
	}
	
	.answer-buttons {
		display: flex;
		justify-content: space-around;
		gap: 30rpx;
		
		.answer-btn {
			flex: 1;
			border: none;
			border-radius: 50rpx;
			padding: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: white;
			
			&.wrong {
				background: linear-gradient(45deg, #F44336, #FF5722);
				box-shadow: 0 8rpx 20rpx rgba(244, 67, 54, 0.3);
			}
			
			&.correct {
				background: linear-gradient(45deg, #4CAF50, #8BC34A);
				box-shadow: 0 8rpx 20rpx rgba(76, 175, 80, 0.3);
			}
		}
	}
}

.game-finished {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 30rpx;
	
	.result-card {
		background: white;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		text-align: center;
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.2);
		width: 100%;
		max-width: 600rpx;
		
		.result-icon {
			font-size: 80rpx;
			margin-bottom: 30rpx;
		}
		
		.result-title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 40rpx;
		}
		
		.result-stats {
			display: flex;
			justify-content: space-around;
			margin-bottom: 50rpx;
			
			.result-stat {
				.result-label {
					display: block;
					color: #666;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				
				.result-value {
					display: block;
					color: #333;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		
		.result-actions {
			display: flex;
			gap: 20rpx;
			
			.result-btn {
				flex: 1;
				border: none;
				border-radius: 50rpx;
				padding: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: white;
				
				&.restart {
					background: linear-gradient(45deg, #4CAF50, #8BC34A);
					box-shadow: 0 8rpx 20rpx rgba(76, 175, 80, 0.3);
				}
				
				&.back {
					background: linear-gradient(45deg, #9E9E9E, #BDBDBD);
					box-shadow: 0 8rpx 20rpx rgba(158, 158, 158, 0.3);
				}
			}
		}
	}
}

.bg-decoration {
	position: fixed;
	top: 50%;
	right: -50rpx;
	transform: translateY(-50%);
	opacity: 0.1;
	z-index: -1;
	
	.decoration-text {
		font-size: 200rpx;
	}
}
</style>
